<script setup lang="ts">
import { NAVS } from '~/shared/common/use-nav';

const navs = ref(NAVS);

const route = useRoute();
const currentPath = computed(() => route.path);
const checkRouteIncluded = (path: string) => {
  return path === '/' ? path === currentPath.value : currentPath.value.includes(path);
};

const title = computed(() => navs.value.find(item => checkRouteIncluded(item.path))?.title);

</script>

<template>
  <div class="relative h-14 bg-neutral-900 shadow-md shadow-neutral-950 z-50 max-lg:h-auto max-lg:hidden">
    <div class="pl-6 pt-4 flex">
      <h1 class="text-white text-xl font-bold relative after:content after:absolute after:-left-2 after:-bottom-4 after:w-18 after:h-1 after:bg-linear-to-r after:from-amber-500 after:to-amber-200 after:rounded-r-md">{{ title }}</h1>
    </div>
    <nav class="absolute right-0 top-0 flex items-center gap-x-10 bg-neutral-800 h-full px-8 border-b border-l border-neutral-800 rounded-bl-md">
      <NuxtLink
        v-for="(item, idx) in navs"
        :key="idx"
        :to="item.path"
        class="text-sm font-bold"
        :class="[checkRouteIncluded(item.path) ? 'text-amber-500' : 'text-white']"
      >{{ item.title }}</NuxtLink>
    </nav>
  </div>
</template>

<style lang="scss" scoped>
</style>